<template>
	<view class="page-cont">
		<view class="control">
			<!-- <uni-segmented-control :current="currentIndex" :values="currentItem" @clickItem="onClickItem"
				styleType="text" activeColor="#5F83F9" /> -->
			<tab :tabActive="currentIndex" :tabs="tabs" :badges="badges" @tabChange="handleTabChange"></tab>
		</view>

		<view class="container">
			<view v-if="currentIndex === 0" class="data-container">
				<item :keys="keys[0]" />
			</view>
			<view v-if="currentIndex === 1">
				<item :keys="keys[1]" />
			</view>
			<view v-if="currentIndex === 2">
				<item :keys="keys[2]" />
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive, onMounted } from 'vue';
	import item from '@/pages/energy/item.vue';
	import { GartherType } from '@/api/energy'

	// 获取屏幕边界到安全区域距离
	const { safeAreaInsets } = uni.getSystemInfoSync()

	const keys = ref([GartherType.xmznh, GartherType.dwpfmhd, GartherType.dwpfmdf])
	const tabs = ref(["项目总能耗", "单位平方米耗电", "单位平方米电费"])
	const badges = ref([])
	const currentIndex = ref(0)

	const handleTabChange = (e) => {
		currentIndex.value = e;
	}

</script>

<style lang="scss" scoped>
	.page-cont {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;

		.container {
			// flex: 1;
			margin-top: 20rpx;
		}
	}
</style>